<template>
	<view class="page">
		<view class="header">
			<view class="header-left" @tap="goBack">
				<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
			</view>
			<view class="header-title">我的课表</view>
			<view class="header-right">
				<text class="edit-btn" @tap="toggleEditMode">{{ isEditMode ? '完成' : '编辑' }}</text>
			</view>
		</view>

		<view class="content">
			<!-- 日期选择器 -->
			<scroll-view class="date-selector" scroll-x>
				<view class="date-list">
					<view v-for="(date, index) in dateList" :key="index" :class="['date-item', { active: date.active }]"
						@click="selectDate(index)">
						<text class="weekday">{{ date.weekday }}</text>
						<text class="day">{{ date.day }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 课表主体 -->
			<scroll-view class="schedule-container" scroll-y>
				<view class="schedule-list">
					<view v-for="(course, index) in courseList" :key="index" class="course-card"
						@click="isEditMode ? editCourse(index) : showCourseDetail(course)">
						<view class="course-info">
							<text class="course-name">{{ course.name }}</text>
							<text class="room-number">班级: {{ course.className }}</text>
							<text class="course-time">{{ course.time }}</text>
							<text class="teacher-name">教师: {{ course.teacher }}</text>
						</view>
						<view class="course-action">
							<button v-if="!isEditMode" class="enter-btn" @click.stop="enterClassroom(course)">进入课堂</button>
							<button v-else class="delete-btn" @click.stop="deleteCourse(index)">删除</button>
						</view>
					</view>
					
					<!-- 添加课程按钮 -->
					<view v-if="isEditMode" class="add-course-card" @click="showAddCourseModal">
						<view class="add-icon">+</view>
						<text class="add-text">添加课程</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 添加/编辑课程模态框 -->
		<view v-if="showCourseModal" class="modal-overlay" @tap="closeCourseModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">{{ editingCourseIndex === -1 ? '添加课程' : '编辑课程' }}</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeCourseModal"></uni-icons>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">课程名称</text>
						<input class="form-input" v-model="courseForm.name" placeholder="请输入课程名称" />
					</view>
					
					<view class="form-item">
						<text class="form-label">班级名称</text>
						<input class="form-input" v-model="courseForm.className" placeholder="请输入班级名称" />
					</view>
					
					<view class="form-item">
						<text class="form-label">上课时间</text>
						<input class="form-input" v-model="courseForm.time" placeholder="例如: 08:00-09:40" />
					</view>
					
					<view class="form-item">
						<text class="form-label">教师姓名</text>
						<input class="form-input" v-model="courseForm.teacher" placeholder="请输入教师姓名" />
					</view>
					
					<view class="form-item">
						<text class="form-label">教室/直播间</text>
						<input class="form-input" v-model="courseForm.roomId" placeholder="请输入教室或直播间编号" />
					</view>
					
					<view class="form-actions">
						<button class="cancel-btn" @tap="closeCourseModal">取消</button>
						<button class="confirm-btn" @tap="saveCourse">保存</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// 是否为编辑模式
	const isEditMode = ref(false);
	
	// 控制添加/编辑课程模态框显示
	const showCourseModal = ref(false);
	
	// 正在编辑的课程索引，-1表示添加新课程
	const editingCourseIndex = ref(-1);
	
	// 课程表单数据
	const courseForm = ref({
		name: '',
		className: '',
		time: '',
		teacher: '',
		roomId: ''
	});

	// 日期列表数据
	const dateList = ref([
		{ weekday: '周一', day: '05-15', active: true },
		{ weekday: '周二', day: '05-16', active: false },
		{ weekday: '周三', day: '05-17', active: false },
		{ weekday: '周四', day: '05-18', active: false },
		{ weekday: '周五', day: '05-19', active: false },
		{ weekday: '周六', day: '05-20', active: false },
		{ weekday: '周日', day: '05-21', active: false }
	]);

	// 课程列表数据
	const courseList = ref([
		{
			name: '高等数学',
			className: '数学2023级1班',
			time: '08:00-09:40',
			teacher: '张老师',
			roomId: 'A101'
		},
		{
			name: '大学物理',
			className: '物理2023级2班',
			time: '10:00-11:40',
			teacher: '李老师',
			roomId: 'B203'
		},
		{
			name: '英语口语',
			className: '英语2023级3班',
			time: '14:00-15:40',
			teacher: '王老师',
			roomId: 'C305'
		}
	]);

	// 切换编辑模式
	const toggleEditMode = () => {
		isEditMode.value = !isEditMode.value;
		if (!isEditMode.value) {
			// 退出编辑模式时关闭模态框
			showCourseModal.value = false;
		}
	};

	// 选择日期
	const selectDate = (index) => {
		dateList.value.forEach((date, i) => {
			date.active = i === index;
		});
	};

	// 显示课程详情
	const showCourseDetail = (course) => {
		uni.showModal({
			title: course.name,
			content: `班级: ${course.className}\n时间: ${course.time}\n教师: ${course.teacher}\n教室: ${course.roomId}`,
			showCancel: false
		});
	};

	// 进入课堂
	const enterClassroom = (course) => {
		uni.showToast({
			title: `进入${course.name}课堂`,
			icon: 'success'
		});
		// 这里可以跳转到实际的课堂页面
	};
	
	// 编辑课程
	const editCourse = (index) => {
		editingCourseIndex.value = index;
		const course = courseList.value[index];
		courseForm.value = { ...course };
		showCourseModal.value = true;
	};
	
	// 删除课程
	const deleteCourse = (index) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这门课程吗？',
			success: function (res) {
				if (res.confirm) {
					courseList.value.splice(index, 1);
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
				}
			}
		});
	};
	
	// 显示添加课程模态框
	const showAddCourseModal = () => {
		editingCourseIndex.value = -1;
		courseForm.value = {
			name: '',
			className: '',
			time: '',
			teacher: '',
			roomId: ''
		};
		showCourseModal.value = true;
	};
	
	// 关闭课程模态框
	const closeCourseModal = () => {
		showCourseModal.value = false;
	};
	
	// 保存课程
	const saveCourse = () => {
		// 简单验证
		if (!courseForm.value.name || !courseForm.value.className || !courseForm.value.time) {
			uni.showToast({
				title: '请填写必填信息',
				icon: 'none'
			});
			return;
		}
		
		// 设置默认教师名（如果未填写）
		if (!courseForm.value.teacher) {
			courseForm.value.teacher = '张老师'; // 可以根据实际登录用户设置
		}
		
		if (editingCourseIndex.value === -1) {
			// 添加新课程
			courseList.value.push({ ...courseForm.value });
			uni.showToast({
				title: '添加成功',
				icon: 'success'
			});
		} else {
			// 更新课程
			courseList.value[editingCourseIndex.value] = { ...courseForm.value };
			uni.showToast({
				title: '更新成功',
				icon: 'success'
			});
		}
		
		closeCourseModal();
	};

	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style>
	.page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.header-left,
	.header-right {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.edit-btn {
		font-size: 28rpx;
		color: #1976D2;
		padding: 10rpx 20rpx;
	}

	.content {
		padding: 20rpx 0;
	}

	.date-selector {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.date-list {
		display: flex;
		white-space: nowrap;
	}

	.date-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
		border: 2rpx solid #eaeaea;
		transition: all 0.3s ease;
		min-width: 100rpx;
	}

	.date-item.active {
		background-color: #1976D2;
		border-color: #1976D2;
	}

	.date-item.active .weekday,
	.date-item.active .day {
		color: #ffffff;
	}

	.weekday {
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 10rpx;
	}

	.day {
		font-size: 28rpx;
		color: #333333;
	}

	.schedule-container {
		flex: 1;
		overflow: auto;
		padding: 0 30rpx;
	}

	.schedule-list {
		display: flex;
		flex-direction: column;
	}

	.course-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.course-info {
		flex: 1;
	}

	.course-name {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.room-number,
	.course-time,
	.teacher-name {
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 8rpx;
	}

	.course-action {
		margin-left: 20rpx;
	}

	.enter-btn {
		background-color: #1976D2;
		color: #ffffff;
		border: none;
		border-radius: 8rpx;
		padding: 15rpx 25rpx;
		font-size: 26rpx;
	}

	.delete-btn {
		background-color: #f44336;
		color: #ffffff;
		border: none;
		border-radius: 8rpx;
		padding: 15rpx 25rpx;
		font-size: 26rpx;
	}

	.add-course-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 150rpx;
		border: 2rpx dashed #1976D2;
	}

	.add-icon {
		font-size: 60rpx;
		color: #1976D2;
		line-height: 1;
	}

	.add-text {
		font-size: 28rpx;
		color: #1976D2;
		margin-top: 10rpx;
	}

	/* 模态框样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 20rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow: hidden;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 15rpx;
		display: block;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
	}

	.form-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}

	.cancel-btn, .confirm-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		border: none;
	}

	.cancel-btn {
		background: #f5f5f5;
		color: #666;
	}

	.confirm-btn {
		background: #1976D2;
		color: #fff;
	}
</style>